<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态添加和删除节点</title>
		<style type="text/css">
			.myArea{ width: 100%; height: 80px;}
			.myDiv{ line-height: 30px;}
		</style>
		<script>
			function RemoveRow(NodeId) {
				//1.获取块节点
				var divNode = document.getElementById(NodeId);
//2.获取子节点，即文本节点
				var chileNode = divNode.childNodes[0];
//3.删除，传入一个参数true会删除其下所有子节点
				divNode.removeChild(chileNode);
			}
			function AddRow() {
				var Input=document.getElementsByTagName('input')
				var TextArea=document.getElementsByClassName('myArea')
				var OldDiv=document.getElementById('div')
				var text1=document.createTextNode(' 公司名称:'+Input[0].value+' ')
				var text2=document.createTextNode('职位:'+Input[1].value)
				var text3=document.createTextNode('工作职责及工作内容描述:'+TextArea[0].value)
				var NewDiv=document.createElement('div')
				NewDiv.id='div'+DivNum++
				NewDiv.appendChild(text1)
				NewDiv.appendChild(text2)
				NewDiv.appendChild(document.createElement('br'))
				NewDiv.appendChild(text3)
				OldDiv.appendChild(NewDiv)
				console.log(NewDiv.id);

			}
        </script>
	</head>
	<body>
		<h2>工作经历</h2>
		<hr/>
		<div id="myContainer">
			<div class="myDiv" id="div1">
				公司名称:<input type="text" />
				职位:<input type="text" />
				<a href="javascript:RemoveRow('div1')">删除工作经历</a>
				<br />
				工作职责及工作内容描述:
				<textarea class="myArea"></textarea>
				<hr />
			</div>			
		</div>
		
		<div style="line-height: 30px; text-align: right;">
			<a href="javascript:AddRow();">添加工作经历</a>
		</div>

	</body>
</html>